<template>
    <div>
        <!-- 主体部分 -->
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" />
            <label @click="all" for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
                <li :class="{ completed: item.isDone }" v-for="item in props.list" :key="item.id">
                    <div class="view">
                        <input @click="cli(item.id)" :checked="item.isDone" class="toggle" type="checkbox" />
                        <label>{{ item.name }}</label>
                        <button @click="del(item.id)" class="destroy"></button>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
    list: {
        type: Array,
    },
});

const emits = defineEmits(["del", 'all', 'cli']);
const del = (id) => {
    emits('del', id);
};

function all() {
    emits('all');
}

function cli(id) {
    emits('cli', id);
}

</script>